<!--主页顶端导航-->
<template>
  <div style="width: 100%;height: 100%">
    <span id="title">欢迎来到后台管理系统</span>
    <div class="header-avater">
      <span @click="updateAvatar" id="ss"><el-avatar size="medium" :src="userInfo.avatar"></el-avatar></span>

      <el-dropdown trigger="click">
        <span class="el-dropdown-link">
          {{userInfo.username}}<i class="el-icon-arrow-down el-icon--right"></i>
        </span>
        <el-dropdown-menu slot="dropdown">
          <el-dropdown-item>
            <router-link to="/userCenter" style="color: black">修改密码</router-link>
          </el-dropdown-item>
          <el-dropdown-item @click.native="logout" style="color: black">退出登录</el-dropdown-item>
        </el-dropdown-menu>
      </el-dropdown>

      <!--target="_blank"：在新页面打开-->
      <el-link href="https://blog.lisongzhang.top" target="_blank" style="color: #2b2d2f">博客</el-link>
    </div>


    <!--更改头像对话框-->
    <el-dialog title="更改头像" :visible.sync="dialogVisible" @close="closeDialog" width="600px" :close-on-click-modal="false">

      <el-avatar :src="userInfo.avatar" :size="110"></el-avatar>
      <el-upload
        class="upload-demo"
        :action="this.$config.baseURL+'/sys/user/avatar'"
        :headers="headers"
        name="file"
        :limit="1"
        :on-exceed="handleExceed"
        :on-success="uploadSuccess"
        :file-list="fileList"
        :before-upload="beforeUploadAvatar">
        <el-button size="small" type="primary">点我上传</el-button>
        <div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且大小不超过2Mb</div>
      </el-upload>
      <!--action:上传的地址；  name:上传的文件字段名；  headers:设置上传的请求头部；-->
    </el-dialog>
  </div>
</template>

<script>
    export default {
      name: "Header",
      data(){
        return {
          userInfo:{
            id:null,
            username:"",
            avatar:""
          },
          dialogVisible: false,  //对话框是否打开
          fileList: [],
          headers:{Authorization:localStorage.getItem('token')}
        }
      },
      created() {
        this.getUserInfo();
      },
      methods:{
        getUserInfo(){
          this.axios.get("/sys/userInfo").then(res=>{
            this.userInfo=res.data.data;
          })
        },
        logout(){ //退出登录执行
          this.axios.post("/logout").then(res=>{
            localStorage.clear();
            sessionStorage.clear();
            this.$store.commit("resetState");
            this.$store.commit("clearLocalStoreToken")
            this.$router.push("/login");
          })
        },
        updateAvatar(){
          this.dialogVisible = true;
        },

        //文件超出个数限制时的钩子
        handleExceed(files, fileList) {
          this.$message.warning(`文件数量超出限制`);
        },
        //头像上传之前检查格式和大小
        beforeUploadAvatar(file){
          let isJPG = file.type === 'image/jpeg';
          let isPNG = file.type === 'image/png';
          const isLt2M = file.size / 1024 / 1024 < 2;

          if (!isJPG && !isPNG) {
            this.$message.error('上传头像图片只能是 JPG或PNG 格式!');
          }
          if (!isLt2M) {
            this.$message.error('上传头像图片大小不能超过 2MB!');
          }
          return (isJPG||isPNG) && isLt2M;
        },
        //关闭对话框时执行
        closeDialog(){
            this.fileList=[];
        },
        //头像上传成功后重新获取用户信息
        uploadSuccess(){
          this.userInfo={};
          this.getUserInfo();
          this.dialogVisible = false;
          this.$message.success('头像更换成功！');
        }
      }
    }
</script>

<style scoped>
  .header-avater{
    float: right;
    width: 150px;
    height: 100%;
    display: flex;
    justify-content: space-around;  /*等间隔排列*/
    align-items: center;  /*上下居中*/
    cursor: pointer;
  }
  .el-dropdown-link { /*下拉菜单鼠标箭头变手*/
    cursor: pointer;
    color: #2b2d2f;
  }
  a{
    text-decoration:none; /*去除链接下划线*/
  }
  .el-icon-arrow-down {
    font-size: 12px;
  }
  #ss{
    cursor: pointer;
    height: 36px;
  }
  #title{
    font-size: 24px;
    line-height: 50px;
  }
</style>
